﻿<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>不想起名|博客</title>
    <%
        String context = request.getContextPath();
    %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords"
          content="不想起名,中国海洋大学,计算机,学生,个人主页,HTML,CSS,PHP,JavaScript,jQuery,XML,AJAX,,SQL,bootstrap,Java"/>
    <meta name="description" content="不想起名的小窝"/>
    <link rel="shortcut icon" href="<%=context %>/img/favicon.ico"/>
    <link rel="stylesheet" href="<%=context %>/css/blog.css"/>
    <%--    <link rel="stylesheet" href="<%=context %>/css/bootstrap.min.css">--%>
    <link rel="stylesheet" href="<%=context %>/css/font-awesome.min.css">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <%--    <script src="<%=context %>/js/jquery.min.js"></script>--%>
    <script src="<%=context %>/js/blog.js"></script>
    <%--    <script src="<%=context %>/js/bootstrap.min.js"></script>--%>
    <script src="<%=context %>/js/jquery.pagination.js"></script>
    <link rel="stylesheet" href="<%=context %>/css/pagination.css">
    <style>
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }
    </style>
    <script>
        // 点击分页按钮以后触发的动作
        function handlePaginationClick(new_page_index, pagination_container) {
            $("#postForm").attr("action", "<%=context %>/servlet/PostlistServlet?role=0&pageNum=" + (new_page_index + 1));
            $("#postForm").submit();
            return false;
        };
        $(function () {
            $("#News-Pagination").pagination(${result.totalRecord}, {
                items_per_page:${result.pageSize}, // 每页显示多少条记录
                current_page: ${result.currentPage} -1, // 当前显示第几页数据
                num_display_entries: 3, // 分页显示的条目数
                next_text: "下一页",
                prev_text: "上一页",
                num_edge_entries: 2, // 连接分页主体，显示的条目数
                callback: handlePaginationClick
            });
        })
        //页面需引入jquery库，天行数据接口
        $(document).ready(function () {
            $.get("http://api.tianapi.com/txapi/dialogue/index?key=1f2e3289eb73c053ad6dd0cb9329f915",
                function (data, status) {
                    // console.log(data);
                    $('#result').append(JSON.stringify(data.newslist[0].dialogue)); //返回内容绑定到ID为result的标签
                    // $('#result-en').append(JSON.stringify(data.newslist[0].english));
                    $('#source').append(JSON.stringify(data.newslist[0].source));
                    // alert("状态码：" + data.code + "\n消息：" + data.msg);
                });
        });
    </script>
</head>

<body style="background: #e2e2e2 url(<%=context %>/img/banner.jpg) no-repeat fixed center;
        background-size: cover;">
<div id="bar" class="scrollbar"></div>
<div id="gotop"></div>
<div id="switch">
    <div id="iconfixed">
        <div class="icon"></div>
    </div>
</div>
<div id="left-nav">
    <div class="author-nav">
        <img src="<%=context %>/img/avatar.jpg" alt="个人头像">
    </div>
    <div class="main-nav">
        <ul>
            <a href="<%=context %>/index.html">
                <li>首页</li>
            </a>
            <a href="PostlistServlet?role=0">
                <li>全部博客</li>
            </a>
            <c:forEach items="${mainCategory}" var="maincatetory">
                <c:if test="${maincatetory.name!='工程'}">
                    <a href="javascript:void(0)" class="havasub">
                        <li>${maincatetory.name }</li>
                    </a>
                    <ul class="submenu">
                        <c:forEach items="${maincatetory.sublist}" var="subcatetory">
                            <a href="PostlistServlet?role=0&sub_id=${subcatetory.id}">
                                <li>${subcatetory.name}</li>
                            </a>
                        </c:forEach>
                    </ul>
                </c:if>
            </c:forEach>
            <a href="<%=context %>/about.html">
                <li>关于</li>
            </a>
            <a href="<%=context %>/servlet/PostlistServlet?role=1">
                <li>控制台</li>
            </a>
        </ul>
    </div>
</div>
<div id="wrap">
    <div id="top">
        <div class="info">
            <div class="bg-title">
                不想起名
                <%--下面是使用的天行数据经典台词接口--%>
                <h3 id="result"></h3>
                <h4 id="source">————</h4>
            </div>
        </div>
    </div>
    <div id="main">
        <form id="postForm" method="POST" action="<%=context %>/servlet/PostlistServlet">
            <div class="container">
                <div class="text-center" style="padding: 2% 8% 2%">
                    <c:forEach items="${result.dataList }" var="article">
                        <div class="post-info">
                            <h2>
                                <a href="<%=context %>/servlet/PostlistServlet?role=2&id=${article.id}">${article.title }</a>
                            </h2>
                            <div class="post-detial">
                                <span>${article.sname}</span>
                                <span>${fn:substring(article.createdate,0,10)}</span>
                            </div>
                        </div>
                        <div style="margin-top: 1%">
                            <p>${article.subtitle }</p>
                        </div>
                        <a href="<%=context %>/servlet/PostlistServlet?role=2&id=${article.id}"
                           class="btn btn-outline-secondary">查看全文</a>
                        <hr/>
                    </c:forEach>
                    <div id="News-Pagination"></div>
                </div>
            </div>
        </form>
    </div>
    <footer>
        <div>
            不想起名
        </div>
    </footer>
</div>
</body>
</html>